A petición de Pedro vamos a aplicar un efecto que al pasar el cursor sobre una o más imágenes de nuestro blog, cambian dinámicamente y cuando el cursor se va de ésta, vuelve a su estado inicial. A este efecto se le llama rollover.

Lo primero que haremos será situarnos en nuestra plantilla Edición de HTML y justo antes de </head> vamos a añadir el siguiente script:

<script language="JavaScript" type="text/javascript">
imagenOn = new Image(300,300);
imagenOn.src = "images/avatar2.gif";
</script>

Guardamos los cambios y nos vamos al lugar donde deseamos añadir la imagen con efecto rollover. En este caso lo hacemos en una entrada.

Copiamos y pegamos lo siguiente:

<a href= "#" onclick="returnfalse;" onmouseover="document.ejemplo.src='url-imagen';" onmouseout="document.ejemplo.src='url-imagen';">
<IMG name="ejemplo" src="url-imagen-1ª" alt = "ejemplo de rollover"width="300" height="300" border= "0">
</a>

En url-imagen añadiremos la url de las imágenes que harán el efecto rollover, o sea cambiarán al pasar el cursor.
Donde url-imagen-1ª será la url de la imagen que aparecerá cada vez que carguemos la página.
Si en lugar de esa primera imagen deseamos un texto bastará con suprimir la url y añadir un texto donde dice ejemplo de rollover
En height="300" width="300" cambiaremos el valor por el tamaño deseado para las imágenes.
Si deseamos añadir en una misma página más de un rollover deberemos añadir un nombre diferente a cada rollover. Por ejemplo donde dice "document.ejemplo" y IMG name="ejemplo" lo cambiaremos por
"document.ejemplo1" y IMG name="ejemplo1"


título de la imagen



título de la imagen



Unknown

Hola Gema el blog siempre lo vi lo escuche nombrar y ahora que lo veo con detenimiento me encanto!
Yo soy el admin de www.videosgrox.com.ar te gustaria intercambiar links?

Mi mail: videosgrox@hotmail.com

Saludos!

Responder
Anónimo

gracias gema!!!
eres mas que genial te lo agradesco mucho, tu informacion me fue muy util te lo vuelvo agradecer, sigue asi exelente blog, muy bueno!!!

salu2s y un millon de gracias!!!

Responder
Gem@

VideosGrox ya estás añadido :)
Bienvenido.

Responder
Gem@

Gtacias a ti Pedro, espero que te sea útil :)

Responder
( Nati )

Hola Gema!!
Es hermosa esta explicacion y mas los resultados.... ni sabia que eso se podia hacer...
Besote enorme!

Responder
alida

Gem@, buenos días esto vale también para la cabecera para hacerla cambiante, ¿si?
Besos

Responder
Gem@

Gracias Nati ;)

Alida puede ser util, pero hay una entrada que pienso te puede ser de más utilidad.
Trata sobre imágenes que cambian al cargar la página.
Aunque la explicación habla de añadir a la sidebar también podemos incluirlo en un elemento de página en la parte de la cabecera.

Responder
alida

Hola gema, te cuento que lo puse en un post, muchas gracias por lo otro
Feliz fine ♫

Responder
Gem@

Ya lo he visto Alida, una rosa preciosa.
Eres buena con la cámara ;)

Responder
syncmaster

hola gema!!!
exelente truco el rollover me funciona de las mil maravillas,pero no encuentro la manera de alinear mi imagen con efecto rollover hacia la izquierda con las letras, es decir que cuando escriba, las letras pasen al lado de la imagen y no por debajo de ella, espero que me puedas ayudar gema ah y gracias por toda tu ayuda tus trucos son muy buenos!!!

este es mi blog http://loquemenospensabas.blogspot.com/

saludos!!!

Responder
Anónimo

hola gema tremendo truco se agradece mucho pero sabes yo trabajo con archivos .swf osea mas bien flash ¿puedo hacer rollover con archivos .swf? lo eh intentado pero no me resulta eh buscado en internet la manera de hacerlo y creo que se puede pero hasta ahora no eh conseguido nada ¿se pordra hacer gema?

saludos!

Responder
Unknown

Muchas gracias Gem@. Andaba buscando precisamente esto, un rollover sencillo de implementar.

Me parece que lo voy a usar en mas de una ocasión para mis fotos.

Te he añadido a mi página de créditos.

página de créditos

Responder
Gem@

syncmaster y anónimo siento ver vuestros comentarios después de tanto tiempo :(

un catalán me alegra que te fuera útil. Gracias por añadirme ;)

Responder
kaasy

Muchisimas gracias!!!!!!!
ya funciona!!!!
Sigue asi!! =D
Bye~~

Responder
Gem@

yz ¡Bien!! kaasy :D

Responder
The_JackPot

GRACIAS!!!... no era lo que ocupaba pero bueno nunca encontre lo que queria asi que me quedo con este que malo no esta.
Para nada....:)

Responder
Gabriel Maiorano

gracias m a crvido tu aporte.. aunq tengo un problemilla... la imagen no c carga hasta pasar el mouse x ella... :S
www.maioriz.vacau.com

Responder
Gem@

:: Así es el efecto Gabriel, cambia al pasar el mouse :O

Responder
alfonso martínez

Hola Gema, pues es la primera vez que te voy a hacer una consulta.

Resulta que quiero utilizar este recurso y me funciona perfectamente en el post, pero cuando copio el codigo del post y lo pego en una parte de mi html del blog me da erro, me dice que "Mensaje de error de XML: Element type "IMG" must be followed by either attribute specifications, ">" or "/>"

Podrias decirme por que pasa esto?

Te lo agradeceria muchisimo, pues me trae de cabeza.

Un saludo y gracias de antemano.

Responder
Gem@

:: Alfonso en qué parte lo estás añadiendo? yo he probado el código de la entrada en un post y en un gadget de html y no da ningún error :S

Responder
alfonso martínez

lo estoy poniendo justo despues de <div id='content-wrapper', tengo dos problemas el primero es que cuando creo el rollover en un post se quedan los botones en vertical, cuando intento ponerlos en horizontal ya no funcionan, interactuan entre los dos. El segundo problema es que cuando me lo llevo a esta parte de la plantilla que te muestro me salta ese error que te comenté.

llevo dos dias intentando crear un rollover que funciones, sin exito, pienso que el código no es lo mio.

Si tienes la solución te lo agradeceria muchisisismo.

Este es le blog donde quiero hacerlo:
http://maparaval.blogspot.com/, donde dice, INICIO, EL PROYECTO MAPA.

Gracias de nuevo.

Responder
Gem@

:: Alfonso prueba a insertarlo en un gadget en lugar de la plantilla.
Lo de los botones no lo entiendo, en la entrada no explico nada de añadirle botones.

Responder
Gabriel

Buen post, lo he de poner a prueba, espero funcione (en esta pagina lo veo mas explicito), porque lo probe de otros y nada, lo les entendí. Saludos.

Responder
Gabriel

Ayayay, uffff. Menudo trabajo y no llegué a nada, pero como le digo buen post y también la idea es buena. Veo que en su pagina si funciona bien.
Gracias.

Responder
Gabriel

En la url(foto 1)
En lo otro (foto 2)
y ultimo (foto 1), con los mismos scripts, solo cambié la dimenciones.

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top